<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/three/three.js"></script>
</head>
<body>
    <script>
        // 创建3D场景对象Scene
        const scene = new THREE.Scene();
        //创建一个长方体几何对象Geometry
        const geometry = new THREE.BoxGeometry(100, 60, 20);
        // 创建一个材质对象Material
        const material = new THREE.MeshBasicMaterial({
            color:0xff0000,
            transparent:true,//开启透明
            opacity:0.5,//设置透明度
        });
        // 创建一个网格模型对象Mesh
        const mesh =  new THREE.Mesh(geometry,material);
        //设置网格模型在三维空间中的位置坐标，默认是坐标原点
        mesh.position.set(10,0,0)

        scene.add(mesh);

        const width = window.innerWidth;
        const height = window.innerHeight;
        // 实例化一个透视投影相机对象
        const camera = new THREE.PerspectiveCamera(30, width / height, 1, 300);
        //相机在Three.js三维坐标系中的位置
        // 根据需要设置相机位置具体值
        camera.position.set(150,150,150);

        camera.lookAt(mesh.position);//指向mesh对应的位置

        // 创建渲染器对象Renderer
        const renderer = new THREE.WebGLRenderer();

         // AxesHelper：辅助观察的坐标系
        const axisHelper = new THREE.AxisHelper( 80 );
        scene.add(axisHelper);
        // 设置渲染器的尺寸
        renderer.setSize(width,height);
        // 将渲染器中的内容添加到body中
        document.body.appendChild(renderer.domElement);
        // 使用渲染器，通过相机将场景渲染进来
        renderer.render(scene,camera);

    </script>
</body>
</html>